<template>
	<Layout>
		<template #title>排名管理</template>
		<scroll-refresher @refresh="loadData">
			<view class="iflex column aic fill" style="padding-top: 30rpx;">
				<view v-for="(item,index) of list" class="iflex shop-item">
					<view class="iflex shop-item__ranking">
						<view class="shop-image aspect-fill">
							<image mode="aspectFill" :src="item.lawFirmLogo"></image>
						</view>
						<view v-if="index<=2" class="ranking">
							<image class="ranking__image" :src="'/static/image/other/ranking.'+(index+1)+'.png'">
							</image>
						</view>
						<view v-else-if="index<=99" class="iflex aic jcc ranking ranking--number">
							{{index+1}}
						</view>
					</view>
					<view class="iflex column jcsb shop-item__info">
						<text>{{item.lawFirmName}}</text>
						<view class="iflex aic fill">
							<view class="ellipsis">
								<view class="iflex aic jcc intro-tag">简介</view>
								{{item.lawFirmDesc}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-refresher>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import { getRankList } from '@/apis/lawfirm';

	const list = ref([])
	function loadData() {
		getRankList().then((res) => {
			list.value = res.rows ?? [];
		});
	}

	onLoad(() => {
		loadData();
	});
</script>

<style lang="scss">
	.shop-item {
		padding: 30rpx 24rpx;
		width: 692.16rpx;
		height: 179.42rpx;
		border-radius: 8rpx;
		background: #FFF;

		&__ranking {
			width: 120rpx;
			height: 120rpx;

			.shop-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 18rpx;
			}

			.ranking {
				position: absolute;
				left: -16rpx;
				bottom: -16rpx;

				&__image {
					width: 46rpx;
					height: 52rpx;
				}

				&--number {
					width: 44.69rpx;
					height: 44.69rpx;
					border-radius: 50%;
					background: #FF710A;
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		&__info {
			width: 500rpx;
			padding: 3rpx 0;
			margin-left: 22rpx;

			text {
				color: #000000;
				font-size: 32rpx;
				font-weight: 500;
			}

			view {
				color: #727683;
				font-size: 24rpx;
				font-weight: 400;

				.intro-tag {
					margin-right: 16rpx;
					width: 64rpx;
					height: 32rpx;
					line-height: 20rpx;
					border-radius: 4rpx;
					background: #FBE8DA;
					color: #ff710a;
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}

		&__button {
			position: absolute;
			right: 0;
		}
	}
</style>